<template>
  <div class="model-container">
    <div class="listName">教练管理</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8" >
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">公告类型</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="">
                    <el-select value="" placeholder="请选择公告类型" size="small">
                      <el-option label="图文" value="0"/>
                      <el-option label="视频" value="1"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" plain @click="add">新增</el-button>
          <el-button type="danger" plain @click="del(0)">删除</el-button>
        </div>
      </div>

      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="暂无数据" @selection-change="changeFun">

          <el-table-column align="center" type="selection" width="55"/>

          <el-table-column align="center" prop="coachId" label="教练id"/>
          <el-table-column align="center" prop="coachName" label="教练名称"/>
          <el-table-column align="center" prop="coachPhoto" label="教练头像"/>
          <el-table-column align="center" prop="coachInfo" label="教练自我介绍"/>
          <el-table-column align="center" prop="orgId" label="所属机构id"/>
          <el-table-column align="center" prop="coachTeachAge" label="从业年限"/>
          <el-table-column align="center" prop="coachTeachLable" label="从业年限lable"/>
          <el-table-column align="center" prop="coachDesc" label="教练描述"/>
          <el-table-column align="center" prop="gradeId" label="教练等级"/>
          <el-table-column align="center" prop="orgName" label="机构名称"/>
          <el-table-column align="center" prop="gradeTitle" label="等级显示"/>
          <el-table-column align="center" prop="gradeLable" label="等级lable"/>

          <el-table-column align="center" prop="seName" label="运动项目名称">
            <template slot-scope="scope">
              <span v-for="(u,i) in scope.row.seName">{{u.seName}}&nbsp&nbsp</span>
<!--              <el-button v-for="(u,i) in scope.row.seName" type="primary">{{u.seName}}</el-button>-->
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">

              <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>

              <el-button title="删除" type="warning" circle icon="el-icon-delete" class="table-icon" @click="del(scope.row)"/>

            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="50%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="姓名" prop="coachName">
            <el-input v-model="dialogBindData.coachName" size="small" type="text" placeholder="姓名"/>
          </el-form-item>
          <el-form-item label="头像图片" prop="coachPhoto">
            <el-input v-model="dialogBindData.coachPhoto" size="small" type="text" placeholder="头像图片"/>
          </el-form-item>
          <el-form-item label="自我介绍" prop="coachInfo">
            <el-input v-model="dialogBindData.coachInfo" size="small" type="textarea" placeholder="自我介绍"/>
          </el-form-item>

          <el-form-item label="所属机构" prop="longitude">
            <el-radio-group v-model="dialogBindData.orgId">
              <el-radio v-for="date in orgsList" :label="date.orgId" :key="date.orgId">{{date.orgName}}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="从业年限" prop="coachTeachAge">
            <el-input v-model="dialogBindData.coachTeachAge" size="small" type="number" placeholder="从业年限"/>
          </el-form-item>
          <el-form-item label="从业年限lable" prop="coachTeachLable">
            <el-input v-model="dialogBindData.coachTeachLable" size="small" type="text" placeholder="从业年限lable"/>
          </el-form-item>
          <el-form-item label="教练描述" prop="coachDesc">
            <el-input v-model="dialogBindData.coachDesc" size="small" type="text" placeholder="教练描述"/>
          </el-form-item>
          <el-form-item label="教练等级" prop="gradeId">
            <el-radio-group v-model="dialogBindData.gradeId">
              <el-radio :label="1">1级</el-radio>
              <el-radio :label="2">2级</el-radio>
              <el-radio :label="3">3级</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="运动项目" prop="sportEvents">
            <el-checkbox-group v-model="dialogBindData.sportEvents">
              <el-checkbox v-for="date in sportEventsList" :label="date.seId" :key="date.seId">{{date.seName}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="账户是否可用" prop="isDelete">
            <el-radio-group v-model="dialogBindData.isDelete">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>

        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as activitynotice from '../../api/activitynotice'
import noticeimg from '../../views/activitynotice/component/noticeimg'
import noticevideoone from '../../views/activitynotice/component/noticevideo1'
import noticevideotwo from '../../views/activitynotice/component/noticevideo2'
import noticevideothree from '../../views/activitynotice/component/noticevideo3'
import noticevideoour from '../../views/activitynotice/component/noticevideo4'
import { getUserInformation } from '@/utils/auth'
import * as system from "../../api/venue";
export default {
  components: { noticeimg, noticevideoone, noticevideotwo, noticevideothree, noticevideoour },
  data() {
    return {
      orgsList: [],
      isRouterAlive: true,
      // 页面搜索
      seacherParam: {},
      searchShow: false,
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      // 弹框
      dialogType: 1, // 1--增加  2--编辑  3--查看
      dialogState: false,
      // 按钮状态
      buttonState: false,
      // 列表数据
      dataOption: null,
      datavalID: [],
      // 提交内容
      dialogBindData: {
        coachName:'',
        coachPhoto:'',
        coachInfo:'',
        orgId:1,
        coachTeachAge:'',
        coachTeachLable:'',
        coachDesc:'',
        gradeId:1,
        sportEvents:[],
        isDelete:1
      },
      rules: {
        coachName: [
          {required: true, message: 'coachName不能为空', trigger: 'blur'}
        ],
        coachPhoto: [
          {required: true, message: 'coachPhoto不能为空', trigger: 'blur'}
        ],
        coachInfo: [
          {required: true, message: 'coachInfo不能为空', trigger: 'blur'}
        ],
        coachTeachAge: [
          {required: true, message: 'coachTeachAge不能为空', trigger: 'blur'}
        ],
        coachTeachLable: [
          {required: true, message: 'coachTeachLable不能为空', trigger: 'blur'}
        ],
        coachDesc: [
          {required: true, message: 'coachDesc不能为空', trigger: 'blur'}
        ],
        sportEvents: [
          {required: true, message: 'sportEvents不能为空', trigger: 'blur'}
        ],
      },
      // 视频
      video1: '',
      video2: '',
      video3: '',
      video4: ''
    }
  },
  computed: {
    dialogTitle() {
      if (this.dialogType === 1) {
        return '新增活动公告'
      }
      if (this.dialogType === 2) {
        return '编辑活动公告'
      } else {
        return '查看'
      }
    }
  },
  beforeMount() {
    this.getList()
    this.getAllSportEvents()
    this.getAllOrgs()
  },
  methods: {
    // 获取用户信息
    getUser() {
      return JSON.parse(getUserInformation())
    },
    getList() {
      const param = {
        current: this.pageNo,
        size: this.pageSize
      }
      activitynotice.getAnoticeList(param).then(res => {
        console.log(res.data);
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    // 新增
    add() {
      this.dialogType = 1
      this.dialogState = true
      this.isRouterAlive = true
    },
    // 编辑
    edit(data) {
      this.dialogType = 2
      this.dialogState = true
      this.isRouterAlive = true
      this.dialogBindData.id = data.id
      this.reBindData(data)
    },
    // 提交
    submmitFun() {
      console.log(this.dialogBindData);
      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          if (this.dialogType === 1) {
            activitynotice.addAnoticeList(this.dialogBindData).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.buttonState = false
              this.getList()
              this.handleClose()
            })
          } else {
            activitynotice.editorAnoticeList(param).then(res => {
              console.log(res)
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.buttonState = false
              this.getList()
              this.handleClose()
            })
          }
        } else {
          return false
        }
      })

    },
    // 删除
    del(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delList(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delList(data) {
      const classID = []
      if (data === 0) {
        for (const val of this.datavalID) {
          classID.push(val.coachId)
        }
      } else {
        classID.push(data.coachId)
      }
      activitynotice.delAnoticeList(classID).then(res => {
        if (res.data.code === 1) {
          this.getList()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        }
      })
    },
    emitSuccessImg(data) {
      this.dialogBindData.img = data
    },
    emitSuccessVideo1(data) {
      if (JSON.stringify(data) !== '{}') {
        data.index = 1
        this.video1 = data
      } else {
        this.video1 = ''
      }
    },
    emitSuccessVideo2(data) {
      if (JSON.stringify(data) !== '{}') {
        data.index = 2
        this.video2 = data
      } else {
        this.video2 = ''
      }
    },
    emitSuccessVideo3(data) {
      if (JSON.stringify(data) !== '{}') {
        data.index = 3
        this.video3 = data
      } else {
        this.video3 = ''
      }
    },
    emitSuccessVideo4(data) {
      if (JSON.stringify(data) !== '{}') {
        data.index = 4
        this.video4 = data
      } else {
        this.video4 = ''
      }
    },
    // 反显
    reBindData(data) {
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = data[key]
      }
    },
    imgFun(data) {
      const arr = data.split(',')
      return arr[0]
    },
    videoFun(data) {
      const arr = JSON.parse(data)
      return arr[0].firstFrameUrl
    },
    changeFun(data) {
      this.datavalID = data
    },
    // 重置
    resetFun() {
      this.$refs.seacherParam.resetFields()
      this.pageNo = 1
      this.pageSize = 10
      this.getList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.getList()
    },
    handleClose() {
      for (const key in this.dialogBindData) {
        if (key === 'type') {
          this.dialogBindData[key] = 0
        } else if (key === 'remark') {
          this.dialogBindData[key] = []
        } else if (key === 'img') {
          this.dialogBindData[key] = []
        } else {
          this.dialogBindData[key] = ''
        }
      }
      this.dialogState = false
      this.isRouterAlive = false
      this.$refs.dialogBindData.clearValidate()
    },
    //初始化 运动项目
    getAllSportEvents() {
      system.getAllSportEvents().then(res => {
        this.sportEventsList = res.data.data;
      })
    },
    getAllOrgs(){
      activitynotice.getAllOrgs().then(res=>{
        console.log(res);
        this.orgsList = res.data.data;
      })
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>

</style>
